<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义指令</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>

    <script>
      //  自定义指令 directive

      //  const directives = {
      //    focus: {
      //      mounted(el) {
      //        el.focus();
      //      },
      //    },
      //  };

      const app = Vue.createApp({
        //   mounted(){
        //    console.log(this.$refs.input);

        //    this.$refs.input.focus();
        //   },

        data(){
            return{hello : true}
        },

        //directives:directives,
        template: `
                <div v-if="hello">
                    <input v-focus>
                </div>
                `,
      });

      app.directive("focus", {
        beforeMount() {
          console.log("beforeMount");
        },

        mounted(el) {
          console.log("mounted");
          el.focus();
        },

        beforeUpdate(){
            console.log("beforeUpdate");
        },

        updated(){
            console.log("updated");
        },

        beforeUnmount(){
            console.log("beforeUnmount");
        },

        unmounted(){
            console.log("unmounted");
        }

      });

      const vm = app.mount("#root");
    </script>
  </body>
</html>
